<template>
    <div>
      <div class="person" v-for="v in person">
        <div class="infomation">
          <img :src="v.headIcon" alt="" class="headicon">
          <div>
            <p style="font-size:12px;">{{v.user_name}}</p>
            <p style="font-size:11px;">{{v.create_time}}</p>
          </div>
        </div>
        <div class="focus" v-if="focu" v-on:click="focus">关注</div>
        <div class="focused" v-else v-on:click="focused">已关注</div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "personInformation",
      props:["person"],
      data(){
          return{
            focu:true,
          }
      },
      methods:{
        focus:function(){
          this.focu = !this.focu;
        },
        focused:function(){
          this.focu = !this.focu;
        }

      }
    }
</script>

<style lang="scss">
  .person{
    width:100vw;
    height:16vw;
    margin-top:-2vw;
    display:inline-block;
        .infomation{
          float:left;
          margin-left:4vw;
          div{
            float:left;
            margin-top:3.8vw;
            margin-left:1.87vw;
              p{
                color:#fff;
              }
          }
       }
  }
  .headicon{
    width:8vw;
    height:8vw;
    margin-top:4vw;
    float:left;
  }
  .focus{
    height:8vw;
    width:16vw;
    border:1px solid #FF4C50;
    color:#ff4c50;
    text-align:center;
    line-height:8vw;
    font-size:12px;
    float:right;
    margin:4vw 4vw 0 0;
    border-radius:4px;
  }
  .focused{
    height:8vw;
    width:16vw;
    background:#FF4C50;
    color:#fff;
    text-align:center;
    line-height:8vw;
    font-size:12px;
    float:right;
    margin:4vw 4vw 0 0;
    border-radius:4px;
  }
</style>
